<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />

	<link rel="stylesheet" type="text/css" media="all" href="./css/mobile_common.css?v=20150517" />
	<link rel="stylesheet" type="text/css" media="all" href="./css/echo_mobile.css?v=20150522" />

	<title>echo回声</title>
</head>

<body class="echo voice">
	<header id="global-header" class="container">
		<div class="brand-logo">
			<a href="#" class="ht">echo</a>
		</div>

		<a href="#" class="ht btn download-app-btn">前往下载echo回声</a>
	</header>

	<div class="container voice-container">
		<div class="voice-cover">
			<img src="http://echo-web-pic.b0.upaiyun.com/75c21441a92b70d9f8a11f47bb727ced.jpg!500" alt="cover" />
		</div>
		
		<div class="mask active"></div>

		<div class="voice-pannel">
			<i id="play-btn" class="icon play-btn" onclick="playOrPauseVideo()"></i>
			<h1>年轻的茶餐厅老板娘</h1>
			<span><a href="#" class="user-name">李雷托</a>发布在<a href="#" class="category">华语流行</a>频道</span>
			<a class="btn bullet-curtain-btn" href="#"></a>
		</div>
	</div>

	<div class="container voice-info">
		<div class="voice-status cf">
			<i class="icon fl played"><b>150</b>播放</i>
			<i class="icon fr like"><b>14</b>喜欢</i>
		</div>

		<div class="voice-intro">
			<p>适婚的年龄</p>
			<p>My little airport</p>
		</div>

		<div class="voice-comments">
			<h3>弹幕评论<span>(761条)</span></h3>
			<ul>
				<li>
					<div class="user-avatar">
						<img class="circle" src="./page_images/user_1.jpg" alt="user" />
					</div>
					
					<div class="content">
						<div class="info cf">
							<span class="fl user-name">UserName</span>
							<time class="time">1天前</time>
							<i class="fr icon like">24</i>
						</div>

						<p>这里是评论内容, 这里是评论内容, 这里是评论内容, 这里是评论内容, 这里是评论内容, 这里是评论内容,这里是评论内容</p>
					</div>
				</li>
				
				<li>
					<div class="user-avatar">
						<img class="circle" src="./page_images/user_2.jpg" alt="user" />
					</div>
					
					<div class="content">
						<div class="info cf">
							<span class="fl user-name">用户名</span>
							<time class="time">1天前</time>
							<i class="fr icon like">24</i>
						</div>

						<p>这里是评论内容, 这里是评论内容, 这里是评论内容, </p>
					</div>
				</li>

				<li>
					<div class="user-avatar">
						<img class="circle" src="./page_images/user_3.jpg" alt="user" />
					</div>
					
					<div class="content">
						<div class="info cf">
							<span class="fl user-name">用户名</span>
							<time class="time">1天前</time>
							<i class="fr icon like">24</i>
						</div>

						<p>这里是评论内容, 这里是评论内容, 这里是评论内容, 这里是评论内容, 这里是评论内容, 这里是评论内容,这里是评论内容, 这里是评论内容, 这里是评论内容,这里是评论内容, 这里是评论内容, 这里是评论内容,</p>
					</div>
				</li>
			</ul>
			
			<div class="btn-wp">
				<a href="#" class="btn more-btn">下载app参与弹幕评论</a>
			</div>
		</div>

		<div class="voice-category">
			<h3>所属频道</h3>

			<div class="category-wp">
				<div class="img-wp br-4">
					<a href="#">
						<img src="./page_images/channel_1.jpg" alt="channel" />
					</a>
				</div>

				<div class="content">
					<h4><a href="#">奇妙听觉馆</a></h4>
					<p>ASMR (Autonomous sensory meridian response)，中文译名“自发性知觉高潮反应”，或”颅内高潮“，是一种生理现象，通常表现为脑部非常舒服的麻木/刺痛的快感。通常由聆听悄声说话和角色扮演而引发。推荐使用耳机观赏，越好的耳机，体验效果越好。</p>
				</div>	
			</div>
		</div>
	</div>

	<footer id="global-footer">
		<span>启维文化 &sdot; echo</span> 
	</footer>
	
	<audio id="player" loop="loop" style="display:none" width="0" height="0" webkit-playsinline>
		<source src="http://echo-mx.qiniudn.com/1769629734.mp3"/>
	</audio>

	<script type="text/javascript">
	    function hasClass(element, className) {
	        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
	        return element.className.match(reg);
	    }

	    function addClass(element, className) {
	        if (!this.hasClass(element, className)) {
	            element.className += " " + className;
	        }
	    }

	    function removeClass(element, className) {
	        if (hasClass(element, className)) {
	            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
	            element.className = element.className.replace(reg, ' ');
	        }
	    }

	    var nativePlayer = document.getElementById("player");
	    nativePlayer.src = 'http://echo-mx.qiniudn.com/1769629734.mp3';
	    function playOrPauseVideo() {
	        if (nativePlayer.paused) {
	            nativePlayer.play();
	        } else {
	            nativePlayer.pause();
	        }
	        return false;
	    }

	    var playButton = document.getElementById("play-btn");
	    nativePlayer.addEventListener('playing', function () {
	        addClass(playButton, "active")
	    });
	    nativePlayer.addEventListener('pause', function () {
	        removeClass(playButton, "active")
	    });

	    window.addEventListener('load', function () { // on page load
		if (nativePlayer.paused) {
			nativePlayer.play();
		    }
		}, false);

		document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
			if (nativePlayer.paused) {
				nativePlayer.play();
		    }
		}, false);
	</script>

</body>
</html>